<template>
	<view class="wrap">
		<!-- 实时状态 -->
		<view class="status-wrap">
			<view class="title-box">
				<view class="line"></view>
				<text class="name">实时状态</text>
				<text class="time" v-show="lastDate">数据更新时间：{{lastDate}}</text>
			</view>

			<view class="status-list">
				<view class="list-item" v-for="(item, index) in statusList" :key="item.id">
					<view class="item-info">
						<image class="list-item-icon" src="https://yg-iot-oss.oss-cn-chengdu.aliyuncs.com/icon/%E5%9C%9F%E5%A3%A4%E6%B8%A9%E5%BA%A6.png"></image>
						<view class="info-box">
							<text class="title">{{item.propertyName}}</text>
							<text class="value">{{item.formatValue}}{{item.unit}}</text>
						</view>
					</view>

					<image class="item-bg" src="../../static/equipment/card_bg.png">
				</view>
				<view class="status-placeholder" v-for="(item, index) in placeholderNum" :key="index"></view>
			</view>
		</view>

		<!-- 查询 -->
		<view class="search-wrap">
			<view class="tag-list">
				<view class="tag-list-item" v-for="item in queryList" :key="item.key" :class="isHaveTag(item.key) > -1 && 'tag-select'"
				 @click="onTagClick(item)">
					<text class="tag-value">{{item.name}}</text>
				</view>
				<view class="tag-placeholder" v-for="(item, index) in placeholderNum" :key="index"></view>
			</view>

			<view class="search-box">
				<view class="date-box">
					<text class="title">日期范围:</text>
					<input class="date-time" type="text" disabled="disabled" v-model="searchInfo.startTime" @click="showDatePicker('startTime')">
					<text class="line">-</text>
					<input class="date-time" type="text" disabled="disabled" v-model="searchInfo.endTime" @click="showDatePicker('endTime')">
				</view>

				<button class="btn-search" @click="onSearch">查询</button>
			</view>

			<view class="con-box">
				<view class="tab-box">
					<text class="tab-item" v-for="item in tabList" :key="item.key" :class="item.key === selectTabKey && 'select'"
					 @click="onTabChange(item.key)">{{item.value}}</text>
				</view>

				<view class="tab-con">
					<!-- 数据列表 -->
					<!-- <view class="tab-con-list" :class="selectTabKey === 'list' && 'show'"> -->
					<view class="tab-con-list" v-if="selectTabKey === 'list'">
						<view style="width: 100%; overflow-x: auto;" v-if="tableList.length">
							<!-- <t-table border="1" border-color="#CFD9E6">
								<t-tr>
									<t-th>时间</t-th>
									<t-th v-for="(item,index) in selectTagList" :key="index">{{item.name}}</t-th>
								</t-tr>

								<view style="max-height: 500rpx; overflow-y: auto;">
									<t-tr v-for="(item, index) in tableList" :key="index">
										<t-td>{{ item.time }}</t-td>
										<t-td v-for="(record, rIndex) in selectTagList" :key="rIndex">{{ item[record.key] }}</t-td>
									</t-tr>
								</view>
							</t-table> -->

							<view class="t-table" :style="{'width': getWidth}">
								<view class="t-tr">
									<view class="t-th" :class="selectTagList.length > 2 ? 'w200': 'flex1'">时间</view>
									<view class="t-th" :class="selectTagList.length > 4 ? 'w100': 'flex1'" v-for="(item,index) in selectTagList"
									 :key="index">{{item.name}}</view>
								</view>

								<scroll-view scroll-y="true" @scrolltolower="scrolltolower" style="max-height: 500rpx;">
									<view class="t-tr" v-for="(item, index) in tableList" :key="index">
										<view class="t-td" :class="selectTagList.length > 2 ? 'w200': 'flex1'">{{item.time}}</view>
										<view class="t-td" :class="selectTagList.length > 4 ? 'w100': 'flex1'" v-for="(record, rIndex) in selectTagList"
										 :key="rIndex">{{ item[record.key] }}</view>
									</view>
								</scroll-view>
							</view>
						</view>

						<view class="no-data" v-else>暂无数据！</view>
					</view>

					<!-- 数据图 -->
					<!-- <view class="tab-con-echarts" :class="selectTabKey === 'echarts' && 'show'"> -->
					<view class="tab-con-echarts" v-if="selectTabKey === 'echarts'">
						<view v-if="haveEchartsInfo">
							<!--#ifdef MP-ALIPAY -->
							<canvas canvas-id="canvasLine" id="canvasLine" class="canvasLine" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio"
							 :style="{'width':cWidth+'px','height':cHeight+'px'}" disable-scroll=true @touchstart="touchLine" @touchmove="moveLine"
							 @touchend="touchEndLine"></canvas>
							<!--#endif-->
							<!--#ifndef MP-ALIPAY -->
							<canvas canvas-id="canvasLine" id="canvasLine" class="canvasLine" disable-scroll=true @touchstart="touchLine"
							 @touchmove="moveLine" @touchend="touchEndLine"></canvas>
							<!--#endif-->
						</view>

						<view class="no-data" v-else>暂无数据！</view>

					</view>
				</view>
			</view>
		</view>

		<mx-date-picker :show="datePickerOptions.show" :type="datePickerOptions.type" :value="datePickerOptions.value"
		 :format="datePickerOptions.format" @confirm="onDateConfirm" @cancel="onDateCancel" />
	</view>
</template>

<script>
	import moment from "@/utils/moment.js"
	import uCharts from "@/utils/u-charts.js"
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue"

	import basePath from "@/common/basePath.js"
	import {
		GetObjProperty,
		IsArray
	} from "@/common/common.js"

	export default {
		components: {
			MxDatePicker,
		},
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				curEquId: "",
				lastDate: "",
				curDateType: "",
				datePickerOptions: {
					show: false,
					type: "datetime",
					value: "",
					format: "yyyy-mm-dd hh:ii"
				},
				selectTabKey: "list",
				tabList: [{
						key: "list",
						value: "数据列表",
					},
					{
						key: "echarts",
						value: "数据图",
					}
				],
				haveEchartsInfo: false,
				placeholderNum: new Array(10),
				statusList: [],
				queryList: [],
				selectTagList: [],
				searchInfo: {
					startTime: moment().format("YYYY-MM-DD 00:00"),
					endTime: moment().format("YYYY-MM-DD HH:mm")
				},
				page: 1,
				pageSize: 20,
				tableList: [],
			}
		},
		onLoad(options) {
			this.cWidth = uni.upx2px(700);
			this.cHeight = uni.upx2px(600);

			this.curEquId = options.equId
			// this.curEquId = "pangu_device"

			this.getLastUpdateData(this.curEquId)
			this.getQueryColumns(this.curEquId)
		},
		computed: {
			getWidth() {
				let len = this.selectTagList.length
				return len > 4 ? `${230 + 4 * 130}rpx` : '100%'
			},
		},
		methods: {
			onSearch() {
				switch (this.selectTabKey) {
					case "list":
						this.getTableList()
						break;

					case "echarts":
						this.getEchartsInfo()
						break;

					default:
						break;
				}
			},
			getEchartsInfo() {
				uni.request({
					url: `${basePath}/iotDataCount/dataCount`,
					method: "GET",
					data: {
						deviceId: this.curEquId,
						legend: this.selectTagList.map(item => item.key),
						startTime: this.searchInfo.startTime + ':00',
						endTime: this.searchInfo.endTime + ':00',
					},
					success: (res) => {
						let resData = GetObjProperty(res, "data")

						if (resData.code === 200 && resData.success) {
							let data = GetObjProperty(resData, "data")

							let series = IsArray(GetObjProperty(data, "series"))

							this.haveEchartsInfo = !!series.length

							this.showLine("canvasLine", {
								categories: IsArray(GetObjProperty(data, "xData")),
								series,
							})
						} else {
							uni.showToast({
								title: resData.uiMsg,
								icon: "none",
							});
						}
					},
				})
			},
			scrolltolower() {
				this.page++

				// this.getTableList()
			},
			getTableList() {
				let property = this.selectTagList.map(item => item.key)

				uni.request({
					url: `${basePath}/iotDataCount/dataList`,
					method: "GET",
					data: {
						deviceId: this.curEquId,
						property: property.join(","),
						startTime: this.searchInfo.startTime + ':00',
						endTime: this.searchInfo.endTime + ':00',
						page: this.page,
						pageSize: this.pageSize
					},
					success: (res) => {
						let resData = GetObjProperty(res, "data")

						if (resData.code === 200 && resData.success) {
							let data = IsArray(GetObjProperty(resData, "data"))

							let tableList = data.map(item => {
								let itemData = {}
								let collectData = IsArray(GetObjProperty(item, "collectData"))
								collectData.forEach(record => {
									if (GetObjProperty(record, "key")) {
										itemData[record.key] = GetObjProperty(record, "value")
									}
								})

								return {
									...itemData,
									time: GetObjProperty(item, "collectionTime"),
								}
							})

							this.tableList = tableList
						} else {
							uni.showToast({
								title: resData.uiMsg,
								icon: "none",
							});
						}
					}
				})
			},
			getQueryColumns(equId) {
				uni.request({
					url: `${basePath}/iotDataCount/queryColumns/${equId}`,
					method: "GET",
					success: (res) => {
						let resData = GetObjProperty(res, "data")

						if (resData.code === 200 && resData.success) {
							this.queryList = IsArray(GetObjProperty(resData, "data"))

							this.selectTagList = this.queryList.map(item => item)

							this.onSearch()
						} else {
							uni.showToast({
								title: resData.uiMsg,
								icon: "none",
							});
						}
					}
				})
			},
			getLastUpdateData(equId) {
				uni.showLoading({
					title: "加载中...",
				})

				uni.request({
					url: `${basePath}/iotDataCount/lastUpdateData/${equId}`,
					method: "GET",
					complete() {
						uni.hideLoading()
					},
					success: (res) => {
						let resData = GetObjProperty(res, "data")

						if (resData.code === 200 && resData.success) {
							let data = GetObjProperty(resData, "data")

							this.lastDate = GetObjProperty(data, "collectTime")
							this.statusList = IsArray(GetObjProperty(data, "data"))
						} else {
							uni.showToast({
								title: resData.uiMsg,
								icon: "none",
							});
						}
					}
				})
			},
			isHaveTag(key) {
				for (let i = 0; i < this.selectTagList.length; i++) {
					if (key === this.selectTagList[i].key) return i
				}

				return -1
			},
			onTagClick(record) {
				let index = this.isHaveTag(record.key)
				index > -1 ? this.selectTagList.splice(index, 1) : this.selectTagList.push(record)

				this.onSearch()
			},
			showDatePicker(type) {
				this.curDateType = type

				this.$set(this.datePickerOptions, "show", true)
				this.$set(this.datePickerOptions, "value", this.searchInfo[type])
			},
			onDateConfirm(e) {
				this.$set(this.datePickerOptions, "show", false)
				this.$set(this.searchInfo, this.curDateType, e.value)
			},
			onDateCancel(e) {
				this.$set(this.datePickerOptions, "show", false)
			},
			onTabChange(key) {
				if (key !== this.selectTabKey) this.selectTabKey = key

				this.$nextTick(() => {
					this.onSearch()
				})
			},
			showLine(canvasId, chartData) {
				let _this = this
				this.canvasLine = new uCharts({
					$this: _this,
					canvasId: canvasId,
					type: 'line',
					fontSize: 11,
					padding: [15, 15, 0, 15],
					legend: {
						show: true,
						padding: 5,
						lineHeight: 11,
						margin: 5,
					},
					dataLabel: true,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: _this.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: false,
					enableScroll: true, //开启图表拖拽功能
					xAxis: {
						disableGrid: false,
						type: 'grid',
						gridType: 'dash',
						itemCount: 4,
						scrollShow: true,
						scrollAlign: 'left',
					},
					yAxis: {
						gridType: 'dash',
						// splitNumber: 8,
						// min: 10,
						// max: 180,
						format: (val) => {
							return val.toFixed(0)
						} //如不写此方法，Y轴刻度默认保留两位小数
					},
					width: _this.cWidth * _this.pixelRatio,
					height: _this.cHeight * _this.pixelRatio,
					extra: {
						lineStyle: 'straight',
						line: {
							type: 'curve'
						}
					}
				});
			},
			touchLine(e) {
				this.canvasLine.scrollStart(e);
			},
			moveLine(e) {
				this.canvasLine.scroll(e);
			},
			touchEndLine(e) {
				this.canvasLine.scrollEnd(e);
			},
		},
	}
</script>

<style lang="scss" scoped>
	.wrap {
		width: 100%;
		height: 100vh;

		.status-wrap {
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;

			.title-box {
				display: flex;
				align-items: center;

				.line {
					width: 8rpx;
					height: 24rpx;
					background: #3DBCF1;
					border-radius: 48rpx;
				}

				.name {
					height: 40rpx;
					margin-right: 8rpx;
					margin-left: 20rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}

				.time {
					margin-top: 4rpx;
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
				}
			}

			.status-list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				margin-top: 40rpx;

				.list-item {
					position: relative;
					width: 210rpx;
					height: 134rpx;
					margin-bottom: 30rpx;
					border-radius: 8rpx;

					.item-bg {
						position: absolute;
						top: 0;
						left: 0;
						z-index: 1;
						width: 100%;
						height: 100%;
						border-radius: 8rpx;
					}

					.item-info {
						position: absolute;
						top: 0;
						left: 0;
						z-index: 2;
						display: flex;
						align-items: center;
						width: 100%;
						height: 100%;
						padding: 12rpx;
						box-sizing: border-box;

						.list-item-icon {
							width: 64rpx;
							height: 64rpx;
							margin-right: 12rpx;
						}

						.info-box {
							flex: 1;
							display: flex;
							flex-wrap: wrap;
							align-content: space-between;
							min-height: 80rpx;
							text-align: center;
							overflow: hidden;

							.title {
								width: 100%;
								font-size: 24rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #FFFFFF;
							}

							.value {
								width: 100%;
								font-size: 24rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #FFFFFF;
							}
						}
					}
				}

				.status-placeholder {
					width: 210rpx;
				}
			}
		}

		.search-wrap {
			width: 100%;
			padding: 30rpx;
			background-color: #F5F7F9;
			border-radius: 48rpx 48rpx 0 0;
			box-sizing: border-box;

			.tag-list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.tag-list-item {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 122rpx;
					height: 60rpx;
					margin-bottom: 20rpx;
					border: 2rpx solid #DDDDDD;
					border-radius: 8rpx;

					&.tag-select {
						background-color: rgba(37, 115, 176, 0.1);
						border-color: #2573B0;

						.tag-value {
							color: #2573B0;
							font-weight: bold;
						}
					}

					.tag-value {
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #ABABAB;
						line-height: 26rpx;
						text-align: center;
					}
				}

				.tag-placeholder {
					width: 122rpx;
				}
			}

			.search-box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				height: 72rpx;
				margin-top: 10rpx;
				padding: 0 10rpx;
				background-color: #FFFFFF;
				border-radius: 8rpx;
				box-sizing: border-box;

				.date-box {
					flex: 1;
					display: flex;
					align-items: center;

					.title {
						margin-right: 10rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #333333;
					}

					.date-time {
						width: 200rpx;
						height: 48rpx;
						background-color: #F5F7F9;
						border-radius: 8rpx;
						font-size: 20rpx;
						font-family: PingFang SC;
						font-weight: 400;
						line-height: 48rpx;
						text-align: center;
						color: #999999;
					}

					.line {
						margin: 0 10rpx;
						font-size: 20rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #999999;
					}
				}

				.btn-search {
					width: 72rpx;
					height: 48rpx;
					padding: 0;
					background-color: #2573B0;
					border: unset;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					line-height: 48rpx;
					color: #FFFFFF;
				}
			}

			.con-box {
				margin-top: 20rpx;

				.tab-box {
					display: flex;
					border-radius: 24rpx;

					.tab-item {
						flex: 1;
						height: 66rpx;
						background-color: #E6EBF1;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
						text-align: center;
						line-height: 66rpx;

						&:first-child {
							border-top-left-radius: 24rpx;
						}

						&:last-child {
							border-top-right-radius: 24rpx;
						}

						&.select {
							position: relative;
							background-color: #FFFFFF;
							font-weight: bold;
							color: #2573B0;

							&::after {
								content: "";
								position: absolute;
								bottom: 10rpx;
								left: 50%;
								width: 64rpx;
								height: 4rpx;
								background-color: #2573B0;
								border-radius: 48rpx;
								transform: translateX(-50%);
							}
						}
					}
				}

				.tab-con {
					position: relative;
					height: 600rpx;
					background-color: #FFFFFF;

					.tab-con-list {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						padding: 20rpx;
						box-sizing: border-box;

						&.show {
							visibility: visible;
						}

						.t-table {
							border: 1rpx #CFD9E6 solid;
							border-left: none;
							box-sizing: border-box;

							.flex1 {
								flex: 1;
							}

							.w100 {
								width: 130rpx;
							}

							.w200 {
								width: 230rpx;
							}

							.t-tr {
								display: flex;

								.t-th {
									display: flex;
									justify-content: center;
									align-items: center;
									font-weight: bold;
									text-align: center;
									padding: 14rpx 10rpx;
									background-color: #F5F7F9;
									border-left: 1px #d0dee5 solid;
									font-size: 20rpx;
									font-family: PingFang SC;
									font-weight: 500;
									color: #666666;
									box-sizing: border-box;
								}

								.t-td {
									display: flex;
									justify-content: center;
									align-items: center;
									padding: 14rpx 10rpx;
									border-top: 1px #d0dee5 solid;
									border-left: 1px #d0dee5 solid;
									text-align: center;
									font-size: 20rpx;
									font-family: PingFang SC;
									font-weight: 500;
									color: #333333;
									box-sizing: border-box;
								}
							}
						}
					}

					.tab-con-echarts {
						// position: absolute;
						// top: 0;
						// left: 0;
						// visibility: hidden;
						width: 700rpx;
						height: 600rpx;
						// padding: 20rpx;
						// box-sizing: border-box;

						&.show {
							visibility: visible;
						}

						.canvasLine {
							width: 700rpx;
							height: 600rpx;
						}
					}

					.no-data {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 100%;
						height: 100%;
						font-size: 11px;
						font-family: PingFang SC;
						font-weight: 500;
						line-height: 16px;
						color: #ABABAB;
					}
				}
			}
		}
	}
</style>
